<template>
  <view class="container">

    
    <!-- 账号列表 -->
    <view class="account-list">
      <view 
        class="account-item" 
        v-for="(account, index) in accounts" 
        :key="index"
        @click="selectAccount(account)"
      >
        <view class="account-info">
          <view class="account-name">{{ account.name }}</view>
          <view class="account-number">{{ account.number }}</view>
          <view class="account-bank">{{ account.bank }} {{ account.branch }}</view>
        </view>
        <view class="account-select">
          <view class="select-circle" :class="{ 'selected': selectedIndex === index }">
            <view class="select-inner" v-if="selectedIndex === index"></view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 添加账号按钮 -->
    <button class="add-btn" @click="addAccount">添加收款账号</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 账号列表
const accounts = ref([
  {
    id: '1',
    name: '江西抽墨科技有限公司',
    number: '6225 6789 9988 889',
    bank: '中国建设银行',
    branch: '赣州支行'
  },
  {
    id: '2',
    name: '张三',
    number: '6225 1234 5678 9012',
    bank: '中国工商银行',
    branch: '赣州分行'
  }
]);

// 选中的账号索引
const selectedIndex = ref(0);

// 页面加载
onLoad((options) => {
  // 获取账号列表
  getAccountList();
  
  // 如果有默认选中的账号ID
  if (options.selectedId) {
    const index = accounts.value.findIndex(item => item.id === options.selectedId);
    if (index !== -1) {
      selectedIndex.value = index;
    }
  }
});

// 获取账号列表
const getAccountList = () => {
  // 模拟API请求
  // 实际应该从服务器获取数据
};

// 选择账号
const selectAccount = (account) => {
  const index = accounts.value.findIndex(item => item.id === account.id);
  selectedIndex.value = index;
  
  // 将选中的账号信息传回上一页
  setTimeout(() => {
    uni.navigateBack({
      success: () => {
        // 使用事件通信将选中的账号传递给上一页
        uni.$emit('accountSelected', account);
      }
    });
  }, 300);
};

// 添加账号
const addAccount = () => {
  uni.navigateTo({
    url: '/pages/dog/account/add-account'
  });
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background-color: #00a046;
  color: #fff;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
}

.header-icons {
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 15px;
}

.header-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.account-list {
  background-color: #fff;
  margin-top: 10px;
}

.account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.account-info {
  flex: 1;
}

.account-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.account-number {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.account-bank {
  font-size: 12px;
  color: #999;
}

.account-select {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.select-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selected {
  border-color: #00a046;
}

.select-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00a046;
}

.add-btn {
  margin: 20px 15px;
  background-color: #00a046;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
}
</style>
